<template>
  <view>
    <view class="container">
      <view>
        <text>房屋名称</text>
        <text>{{data.postName}}</text>
      </view>
      <view>
        <text>月数</text>
        <text>{{data.amount}}</text>
      </view>
      <view>
        <text>租客联系电话</text>
        <text>{{data.userPhone}}</text>
      </view>
      <view>
        <text>租客姓名</text>
        <text>{{data.userName}}</text>
      </view>
      <view>
        <text>总价</text>
        <text>{{data.price}}</text>
      </view>
      <view>
        <text>押金</text>
        <text>{{data.deposit}}</text>
      </view>
      <view>
        <text>租房日期</text>
        <uni-dateformat :threshold="[0, 0]" :date="data.rentStart"></uni-dateformat>
      </view>
      <view>
        <text>结束日期</text>
        <uni-dateformat :threshold="[0, 0]" :date="data.rentEnd"></uni-dateformat>
      </view>
      <view>
        <text>下次缴费日期</text>
        <uni-dateformat :threshold="[0, 0]" :date="data.nextChargeTime"></uni-dateformat>
      </view>
      <view>
        <text>交租类型</text>
        <uni-dateformat :threshold="[0, 0]" :date="data.priceType"></uni-dateformat>
      </view>
      <view>
        <text>合同</text>
        <uni-file-picker v-if="data.contract && data.contract.fileType == 'image'" :value="data.contract" :file-mediatype="data.contract && data.contract.fileType" return-type="object" readonly></uni-file-picker>
        <uni-link v-else-if="data.contract" :href="data.contract.url" :text="data.contract.url"></uni-link>
        <text v-else></text>
      </view>
      <view>
        <text>备注</text>
        <text>{{data.remark}}</text>
      </view>
      <view>
        <text>订单状态</text>
        <text>{{options.status_valuetotext[data.status]}}</text>
      </view>
      <view>
        <text>租客身份证号</text>
        <text>{{data.userIdcard}}</text>
      </view>
      <view>
        <text>身份证照片</text>
        <uni-file-picker v-if="data.idcardUrl && data.idcardUrl.fileType == 'image'" :value="data.idcardUrl" :file-mediatype="data.idcardUrl && data.idcardUrl.fileType" return-type="object" readonly></uni-file-picker>
        <uni-link v-else-if="data.idcardUrl" :href="data.idcardUrl.url" :text="data.idcardUrl.url"></uni-link>
        <text v-else></text>
      </view>
      <view>
        <text>月租金</text>
        <text>{{data.pricePerMonth}}</text>
      </view>
      <view>
        <text>网费</text>
        <text>{{data.netFee}}</text>
      </view>
      <view>
        <text>水费</text>
        <text>{{data.waterFee}}</text>
      </view>
      <view>
        <text>燃气费</text>
        <text>{{data.fireFee}}</text>
      </view>
      <view>
        <text>物业费</text>
        <text>{{data.propertyFee}}</text>
      </view>
    </view>
    <view class="btns">
      <button type="primary" @click="handleUpdate">修改</button>
      <button type="warn" class="btn-delete" @click="handleDelete">删除</button>
    </view>
  </view>
</template>

<script>
  // 由schema2code生成，包含校验规则和enum静态数据
  import { enumConverter } from '../../js_sdk/validator/order.js';

  export default {
    data() {
      return {
        data: {},
        queryWhere: '',
        loadMore: {
          contentdown: '',
          contentrefresh: '',
          contentnomore: ''
        },
        options: {
          // 将scheme enum 属性静态数据中的value转成text
          ...enumConverter
        }
      }
    },
    onLoad(e) {
      this._id = e.id
    },
    onReady() {
      if (this._id) {
        this.queryWhere = '_id=="' + this._id + '"'
        this.getDetail()
      }
    },
    methods: {
      handleUpdate() {
        // 打开修改页面
        uni.navigateTo({
          url: './edit?id=' + this._id,
          events: {
            // 监听修改页面成功修改数据后, 刷新当前页面数据
            refreshData: () => {
              this.$refs.udb.loadData({
                clear: true
              })
            }
          }
        })
      },
      getDetail() {
        this.$u.api.order.form(this._id).then((resp) => {
          if (resp.code == '200') {
            this.data = resp.data
          } else {
            this.$u.toast(resp.msg);
          }
        })
      },
      handleDelete() {
        this.$refs.udb.remove(this._id, {
          success: (res) => {
            // 删除数据成功后跳转到list页面
            uni.navigateTo({
              url: './list'
            })
          }
        })
      }
    }
  }
</script>

<style>
  .container {
    padding: 10px;
  }

  .btns {
    margin-top: 10px;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
  }

  .btns button {
    flex: 1;
  }

  .btn-delete {
    margin-left: 10px;
  }
</style>
